<template>
	<view class="repair">
		<view class="repair-item" v-for="(item, index) in lists" :key="index" @click="$goPage('/repair/detail')">
			<view class="repair-item_cell u-flex">
				<view class="u-flex-1">
					<text class="repair-item_cell--label">船名：</text>
					<text class="repair-item_cell--value">{{item.name}}</text>
				</view>
				<view class="repair-item_cell--state">
					<text class="icon icon-lunchuan"></text>
					{{item.state}}
				</view>
			</view>
			<view class="repair-item_cell" v-if="item.state == '产前策划' || item.state == '修理终止' || item.state == '收到修理单' || item.state == '洽谈' || item.state == '合同签订'">
				<text class="repair-item_cell--label">预计修理日期：</text>
				<text class="repair-item_cell--value">{{item.xdate != '' ? item.xdate : '-'}}</text>
			</view>
			<view class="repair-item_cell" v-if="item.state != '修理终止' && item.state != '收到修理单' && item.state != '洽谈'">
				<text class="repair-item_cell--label">合同报价：</text>
				<text class="repair-item_cell--value">{{item.hprice != '' ? item.hprice : '-'}}</text>
			</view>
			<view class="repair-item_cell" v-if="item.state != '修理终止' && item.state != '收到修理单' && item.state != '洽谈'">
				<text class="repair-item_cell--label">合同工期：</text>
				<text class="repair-item_cell--value">{{item.period != '' ? item.period : '-'}}</text>
			</view>
			<view class="repair-item_cell" v-if="item.state != '产前策划' && item.state != '进厂' && item.state != '修理终止' && item.state != '收到修理单' && item.state != '合同签订'">
				<text class="repair-item_cell--label">预估修费：</text>
				<text class="repair-item_cell--value">{{item.yprice != '' ? item.yprice : '-'}}</text>
			</view>
			<view class="repair-item_cell" v-if="item.state != '产前策划' && item.state != '进厂' && item.state != '修理终止' && item.state != '收到修理单' && item.state != '合同签订'">
				<text class="repair-item_cell--label">预计完工日期：</text>
				<text class="repair-item_cell--value">{{item.ydate != '' ? item.ydate : '-'}}</text>
			</view>
			<view class="repair-item_cell"  v-if="item.state != '修理终止' && item.state != '收到修理单'&& item.state != '洽谈' && item.state != '合同签订'">
				<text class="repair-item_cell--label">修理船厂：</text>
				<text class="repair-item_cell--value">{{item.xshop != '' ? item.xshop : '-'}}</text>
			</view>
			<view class="repair-item_cell" v-if="item.state == '产前策划'">
				<text class="repair-item_cell--label">机务：</text>
				<text class="repair-item_cell--value">{{item.maintenance != '' ? item.maintenance : '-'}}</text>
			</view>
		</view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-bottom="45" margin-top="45" color="#C1C0C0" />
	</view>
</template>

<script>
import pageMixin from '@/utils/pageMixin';
export default {
  mixins: [pageMixin],
		data() {
			return {
				lists:[
					{
						xid:'100',
						name:'萨罗尼克0',
						state:'收到修理单',
						xdate:'2021/4/2',
						hprice:'3000,000',
						period:'100天',
						xshop:'比星特',
						maintenance:'',
						yprice:'2000,000',
						ydate:'2021/5/2',
					},
					{
						xid:'101',
						name:'萨罗尼克0',
						state:'洽谈',
						xdate:'2021/4/2',
						hprice:'3000,000',
						period:'100天',
						xshop:'比星特',
						maintenance:'',
						yprice:'2000,000',
						ydate:'2021/5/2',
					},
					{
						xid:'102',
						name:'萨罗尼克0',
						state:'合同签订',
						xdate:'2021/4/2',
						hprice:'3000,000',
						period:'100天',
						xshop:'比星特',
						maintenance:'',
						yprice:'2000,000',
						ydate:'2021/5/2',
					},
					{
						xid:'103',
						name:'萨罗尼克0',
						state:'修理终止',
						xdate:'2021/4/2',
						hprice:'3000,000',
						period:'100天',
						xshop:'比星特',
						maintenance:'',
						yprice:'2000,000',
						ydate:'2021/5/2',
					},
					{
						xid:'111',
						name:'萨罗尼克1',
						state:'产前策划',
						xdate:'2021/4/2',
						hprice:'3000,000',
						period:'100天',
						xshop:'比星特',
						maintenance:'',
						yprice:'2000,000',
						ydate:'2021/5/2',
					},
					{
						xid:'122',
						name:'萨罗尼克2',
						state:'进厂',
						xdate:'2021/4/2',
						hprice:'3000,000',
						period:'100天',
						xshop:'',
						maintenance:'木木',
						yprice:'2000,000',
						ydate:'2021/5/2',
					},
					{
						xid:'133',
						name:'萨罗尼克3',
						state:'开工',
						xdate:'2021/4/2',
						hprice:'3000,000',
						period:'100天',
						xshop:'比星特',
						maintenance:'木木',
						yprice:'',
						ydate:'',
					},
					{
						xid:'144',
						name:'萨罗尼克4',
						state:'进坞',
						xdate:'',
						hprice:'',
						period:'100天',
						xshop:'比星特',
						maintenance:'木木',
						yprice:'2000,000',
						ydate:'2021/5/2',
					},
					{
						xid:'155',
						name:'萨罗尼克5',
						state:'出坞',
						xdate:'2021/4/2',
						hprice:'3000,000',
						period:'100天',
						xshop:'',
						maintenance:'木木',
						yprice:'',
						ydate:'',
					},
					{
						xid:'166',
						name:'萨罗尼克6',
						state:'完工',
						xdate:'2021/4/2',
						hprice:'3000,000',
						period:'',
						xshop:'',
						maintenance:'',
						yprice:'',
						ydate:'',
					},
					{
						xid:'17777',
						name:'萨罗尼克7',
						state:'开航',
						xdate:'',
						hprice:'',
						period:'',
						xshop:'',
						maintenance:'',
						yprice:'',
						ydate:'',
					},
					
				],
				status: 'nomore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '到底了哦'
				}
			}
		},

		onLoad() {

		},
		onShow() {
		},
		components: {
		},
        computed: {
			i18n(){
				return this.$t('project')
			}
        },
		methods: {
		},
        onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
        }
	}
</script>

<style lang="scss" scoped>
	.repair {
		// padding-bottom: 88rpx;
	}
	.repair-item {
		padding: 36rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		&_cell {
			&+& {
				margin-top: 24rpx;
			}
			&--label {
				color: #666666;
			}
			&--value {
				color: #000000;
			}
			&--state{
				position: relative;
				right: -30rpx;
				height: 58rpx;
				line-height: 58rpx;
				padding:0 14rpx;
				font-size: 28rpx;
				color: #5E6D82;
				background-color: #ECF8FF;
				.icon{
					margin-right: 6rpx;
				}
			}
			&--state:before{
				content: '';
				position: absolute;
				left: -20rpx;
				top: 0;
				width:0;
				height:0;
				border-top:29rpx solid transparent;
				border-bottom:29rpx solid transparent;
				border-right:29rpx solid  #ECF8FF;

			}
		}
	}
</style>
